import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';

import { State, RouterStateUrl } from '../../../store';
import * as fromRouteState from '../../../store/selectors/router-state.selector';
import { Steps, StepTypes } from './steps.model';
import { LayerFormsService } from './layer-forms.service';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'ege-layer-forms',
  templateUrl: './layer-forms.component.html',
  styleUrls: ['./layer-forms.component.scss']
})
export class LayerFormsComponent implements OnInit {

  state: number = 0;
  steps: Steps[] = [
    { path: 'info', title: '基本信息' },
    { path: 'configure', title: '参数配置' },
    { path: 'other', title: '其他' },
    { path: 'result', title: '完成' }
  ];

  constructor(
    private store: Store<State>,
    private layerFormsService: LayerFormsService
  ) { }

  ngOnInit() { 
    this.layerFormsService.init(StepTypes.info, {});
    this.store.select(fromRouteState.getRouterStateUrlSelector)
      .subscribe((state: RouterStateUrl) => {
        this.state = this.getState(state.url);
      });
  }

  /**
   * @private
   * @param url string
   */
  private getState(url: string): number {
    const urlArray: string[] = url.split('?');
    const pathArray: string[] = urlArray[0].split('/');
    const lastPath: string = pathArray[pathArray.length -1];
    return this.steps.findIndex((step: Steps) => step.path === lastPath);
  }

}
